<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>V Mandelbrot WebAssembly Example</title>
	</head>
	<body>
		<p>Below you should see the picture of the Mandelbrot set,
		<br>calculated in WASM, and shown in a Canvas element.</p>
		<canvas
			id="canvas"
			width="400"
			height="400"
			style="image-rendering: crisp-edges"
		></canvas>
		<script>
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			ctx.font = "32px serif";
			ctx.fillText("Please wait...", 100, 250);
			var memory;

			function get_string(ptr, len) {
				const buf = new Uint8Array(memory.buffer, ptr, len);
				const str = new TextDecoder("utf8").decode(buf);
				return str;
			}

			const env = {
				canvas_x: () => canvas.width,
				canvas_y: () => canvas.height,
				setpixel: (x, y, c) => {
					ctx.fillStyle = "rgba(1,1,1," + c / 255 + ")";
					ctx.fillRect(x, y, 1, 1);
				},
				__writeln: (ptr, len) => {
					console.log(get_string(ptr, len));
				},
				__panic_abort: (ptr, len) => {
					throw get_string(ptr, len);
				},
			};

			WebAssembly.instantiateStreaming(fetch("mandelbrot.wasm"), {
				env: env,
			}).then((res) => {
				console.log(env.canvas_x())
				console.log(env.canvas_y())
				memory = res.instance.exports["memory"];
				console.time("main.main");
				res.instance.exports["main.main"]();
				console.timeEnd("main.main");
			});
		</script>
	</body>
</html>
